<template>
  <div>
    <div class="vip">
      <div class="now">
        <!-- 当前积分 -->
        <h3 class="nowgrade">当前积分</h3>
        <h1 class="grade">6000</h1>
        <el-button type="primary" class="chongzhi" size="mini"
          @click="go('addmoney')">去充值</el-button
        >
        <el-button type="info" class="xinxi" @click="go('jifenrule')" size="mini">开发票</el-button>
        <el-link class="rules">积分使用规则</el-link>
      </div>

      <!-- 待处理信息 -->
      <div class="circle">
        <h3 class="chuli">待处理信息</h3>
        <div class="c1">未处理还款处理</div>
        <div class="c2">当日待处理还款</div>
        <div class="c3">今日新增客户</div>
        <div class="c4">风险预警</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    go(name){
      if(name !== this.$router.history.current.name){
        this.$router.push({name})
      }
    }
  }
};
</script>

<style lang="scss" scoped>
// 当前积分
.now{
height: 130px;
position: relative;

}
.nowgrade{
font-size: 16px;
font-weight: normal;
position: absolute;
left:0px;
top:35px;

}
.grade{
font-size: 44px;
color: red;
top: -20px;
left: 70px;
font-weight: normal;
position: absolute;

}
.chongzhi {
border:1px solid black;
color:black;
font-weight: normal;
position: absolute;
left:190px;
top:15px;
}
.xinxi{
border:1px solid black;
color:black;
font-weight: normal;
position: absolute;
left:260px;
top:15px;
}
.rules{
position: absolute;
left:190px;
top:55px;
}
// 待处理信息 
.circle{
position: relative;
height:200px;
}
.chuli{
position: absolute;
left: 0px;
top:30px;
font-size: 16px;
font-weight: normal;

}
.c1,.c2,.c3,.c4{
height: 70px;
width: 110px;
border: 1px solid black;
border-radius: 50%;
text-align: center;
line-height: 30px;
font-size: 20px;
padding-top: 30px;
} 
.c1{
position: absolute;
left: 100px;
top: 70px;
background:gold;
}
.c2{
position: absolute;
left: 300px;
top: 70px;
background:rgb(63, 131, 194);
}
.c3{
position: absolute;
left: 500px;
top: 70px;
background:rgb(66, 201, 138);
}
.c4{
position: absolute;
left: 700px;
top: 70px;
background:red;
}
// 业务统计
.tongji{
position: relative;
height:300px;
}
.yewu{
position: absolute;
left: 0px;
top:30px;
font-size: 16px;
font-weight: normal;
}
.tongji>img{
position: absolute;
left: 150px;
top: 80px;
}
</style>